/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './src/components/**/*.{html,js,jsx,ts,tsx,mdx}',
    './src/screens/**/*.{js,ts,jsx,tsx}',
    './src/layouts/**/*.{js,ts,jsx,tsx}',
    './src/**/*.{js,ts,jsx,tsx}',
    './layouts/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {
      colors: {
        primary: {
          0: 'var(--color-primary-0)',
          50: 'var(--color-primary-50)',
          100: 'var(--color-primary-100)',
          200: 'var(--color-primary-200)',
          300: 'var(--color-primary-300)',
          400: 'var(--color-primary-400)',
          500: 'var(--color-primary-500)',
          600: 'var(--color-primary-600)',
          700: 'var(--color-primary-700)',
          800: 'var(--color-primary-800)',
          900: 'var(--color-primary-900)',
          950: 'var(--color-primary-950)',
        },
        secondary: {
          0: 'var(--color-secondary-0)',
          50: 'var(--color-secondary-50)',
          100: 'var(--color-secondary-100)',
          200: 'var(--color-secondary-200)',
          300: 'var(--color-secondary-300)',
          400: 'var(--color-secondary-400)',
          500: 'var(--color-secondary-500)',
          600: 'var(--color-secondary-600)',
          700: 'var(--color-secondary-700)',
          800: 'var(--color-secondary-800)',
          900: 'var(--color-secondary-900)',
          950: 'var(--color-secondary-950)',
        },
        tertiary: {
          50: 'var(--color-tertiary-50)',
          100: 'var(--color-tertiary-100)',
          200: 'var(--color-tertiary-200)',
          300: 'var(--color-tertiary-300)',
          400: 'var(--color-tertiary-400)',
          500: 'var(--color-tertiary-500)',
          600: 'var(--color-tertiary-600)',
          700: 'var(--color-tertiary-700)',
          800: 'var(--color-tertiary-800)',
          900: 'var(--color-tertiary-900)',
          950: 'var(--color-tertiary-950)',
        },
        error: {
          0: 'var(--color-error-0)',
          50: 'var(--color-error-50)',
          100: 'var(--color-error-100)',
          200: 'var(--color-error-200)',
          300: 'var(--color-error-300)',
          400: 'var(--color-error-400)',
          500: 'var(--color-error-500)',
          600: 'var(--color-error-600)',
          700: 'var(--color-error-700)',
          800: 'var(--color-error-800)',
          900: 'var(--color-error-900)',
          950: 'var(--color-error-950)',
        },
        success: {
          0: 'var(--color-success-0)',
          50: 'var(--color-success-50)',
          100: 'var(--color-success-100)',
          200: 'var(--color-success-200)',
          300: 'var(--color-success-300)',
          400: 'var(--color-success-400)',
          500: 'var(--color-success-500)',
          600: 'var(--color-success-600)',
          700: 'var(--color-success-700)',
          800: 'var(--color-success-800)',
          900: 'var(--color-success-900)',
          950: 'var(--color-success-950)',
        },
        warning: {
          0: 'var(--color-warning-0)',
          50: 'var(--color-warning-50)',
          100: 'var(--color-warning-100)',
          200: 'var(--color-warning-200)',
          300: 'var(--color-warning-300)',
          400: 'var(--color-warning-400)',
          500: 'var(--color-warning-500)',
          600: 'var(--color-warning-600)',
          700: 'var(--color-warning-700)',
          800: 'var(--color-warning-800)',
          900: 'var(--color-warning-900)',
          950: 'var(--color-warning-950)',
        },
        info: {
          0: 'var(--color-info-0)',
          50: 'var(--color-info-50)',
          100: 'var(--color-info-100)',
          200: 'var(--color-info-200)',
          300: 'var(--color-info-300)',
          400: 'var(--color-info-400)',
          500: 'var(--color-info-500)',
          600: 'var(--color-info-600)',
          700: 'var(--color-info-700)',
          800: 'var(--color-info-800)',
          900: 'var(--color-info-900)',
          950: 'var(--color-info-950)',
        },
        typography: {
          0: 'var(--color-typography-0)',
          50: 'var(--color-typography-50)',
          100: 'var(--color-typography-100)',
          200: 'var(--color-typography-200)',
          300: 'var(--color-typography-300)',
          400: 'var(--color-typography-400)',
          500: 'var(--color-typography-500)',
          600: 'var(--color-typography-600)',
          700: 'var(--color-typography-700)',
          800: 'var(--color-typography-800)',
          900: 'var(--color-typography-900)',
          950: 'var(--color-typography-950)',
          white: '#FFFFFF',
          gray: '#D4D4D4',
          black: '#181718',
        },
        outline: {
          0: 'var(--color-outline-0)',
          50: 'var(--color-outline-50)',
          100: 'var(--color-outline-100)',
          200: 'var(--color-outline-200)',
          300: 'var(--color-outline-300)',
          400: 'var(--color-outline-400)',
          500: 'var(--color-outline-500)',
          600: 'var(--color-outline-600)',
          700: 'var(--color-outline-700)',
          800: 'var(--color-outline-800)',
          900: 'var(--color-outline-900)',
          950: 'var(--color-outline-950)',
        },
        background: {
          0: 'var(--color-background-0)',
          50: 'var(--color-background-50)',
          100: 'var(--color-background-100)',
          200: 'var(--color-background-200)',
          300: 'var(--color-background-300)',
          400: 'var(--color-background-400)',
          500: 'var(--color-background-500)',
          600: 'var(--color-background-600)',
          700: 'var(--color-background-700)',
          800: 'var(--color-background-800)',
          900: 'var(--color-background-900)',
          950: 'var(--color-background-950)',
          error: 'var(--color-background-error)',
          warning: 'var(--color-background-warning)',
          muted: 'var(--color-background-muted)',
          success: 'var(--color-background-success)',
          info: 'var(--color-background-info)',
          light: '#FBFBFB',
          dark: '#181719',
        },
      },
      spacing: {
        px: '1px',
        0: 0,
        0.5: 2,
        1: 4,
        1.5: 6,
        2: 8,
        2.5: 10,
        3: 12,
        3.5: 14,
        4: 16,
        4.5: 18,
        5: 20,
        6: 24,
        7: 28,
        8: 32,
        9: 36,
        10: 40,
        11: 44,
        12: 48,
        16: 64,
        20: 80,
        24: 96,
        32: 128,
        35: 140,
        40: 160,
        48: 192,
        56: 224,
        64: 256,
        72: 288,
        80: 320,
        96: 384,
        '1/2': '50%',
        '1/3': '33.333%',
        '2/3': '66.666%',
        '1/4': '25%',
        '2/4': '50%',
        '3/4': '75%',
        '1/5': '20%',
        '2/5': '40%',
        '3/5': '60%',
        '4/5': '80%',
        '1/6': '16.666%',
        '2/6': '33.333%',
        '3/6': '50%',
        '4/6': '66.666%',
        '5/6': '83.333%',
        full: '100%',

        '25/2': '12%',
        '100/7': '14%',
        '6/25': '24%',
        '3/10': '30%',
        '9/20': '45%',
        '12/25': '48%',
        '7/10': '70%',

        60: 60,
        74: 74,
        70: 70,
        90: 90,
        122: 122,
        141: 141,
        170: 170,
        182: 182,
        200: 200,
        212: 212, //layoutPadding
        234: 234, //qrBoxInner
        275: 275,
        354: 354,
        384: 384,
        372: 372, //imgWidth
        422: 422,
        441: 441,
        480: 480,
        508: 508, //boxSize
        544: 544,
        authcard: 544,
        622: 622,
        736: 736,
        764: 764,
        containerWidth: 1016,
      },
      fontFamily: {
        heading: undefined,
        body: undefined,
        mono: undefined,
      },
      outlineWidth: {
        20: 20,
        50: 50,
      },
      fontWeight: {
        hairline: '100',
        extraBlack: '950',
      },
      fontSize: {
        '2xs': '10px',
      },
    },
    plugins: [],
  },
};
